<template>
  <div>
    <el-row>
      <el-col :span="8">
        <table-search :conn-name="connName" :namespace="namespace" @click-row="choseTable"/>
      </el-col>
      <el-col :span="16" class="padding">
        <el-form size="small" >
          <el-form-item label="选择列">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="selectItems" @change="handleCheckedCitiesChange" style="height: 20vh;overflow-y: scroll" >
              <el-checkbox v-for="columnName in columnNames" :key="columnName" :label="columnName" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="变更类型">
            <el-select v-model="changeType" filterable clearable>
              <el-option label="新增" value="insert" />
              <el-option label="修改" value="update" />
              <el-option label="删除" value="update" />
            </el-select>
          </el-form-item>
          <el-form-item label="数据库类型">
            <el-checkbox-group v-model="dbTypes" >
              <el-checkbox v-for="dbType in dbTypes"  :key="dbType" :label="dbType" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="查询条件">
            <el-input
              v-model="condition"
              type="textarea"
              class="padding-top"
              :autosize="{ minRows: 10, maxRows: 20}"
              placeholder="查询条件"
            />
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="dataChangeSqls">生成变更SQL</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-tabs :active-name="tabsData.length > 0 ? tabsData[0].dbType: ''" >
        <el-tab-pane v-for="tab in tabsData" :name="tab.dbType" :label="tab.dbType" :key="tab.dbType">
          <p>总sql数量: {{tab.sqls.length}} <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(tab.sqls,$event)">复制所有</el-button></p>
          <ul class="data-list" style="max-height: 80vh;overflow-y: scroll" >
            <li v-for="(sql,index) in tab.sqls">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>SQL {{index + 1}}</span>
                  <el-button style="float: right; padding: 3px 0"  type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(sql,$event)">复制</el-button>
                </div>
                <pre >{{sql}}</pre>
              </el-card>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import TableSearch from '@/views/database/TableSearch'

import database from '@/api/database'
import clip from '@/utils/clipboard'

export default {
  name: 'DataChangeSql',
  props: {
    connName: String,
    namespace: Object
  },
  components: { TableSearch },
  data(){
    return {
      isIndeterminate: false,
      checkAll: true,
      columnNames: [],
      selectItems: [],
      condition: null,
      changeType: null,
      actualTableName: null,
      dbTypes: ['mysql','oracle'],
      tabs:{
        activeTabName:'',
      },
      tabsData: []
    }
  },
  mounted() {

  },
  methods: {
    handleCheckAllChange(val){
      this.selectItems = val ? this.columnNames : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.columnNames.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnNames.length;
    },
    copyText(data,$event){
      if (typeof(data) === 'string'){
        clip(data, $event)
      }else{
        clip(data.join('\n'), $event)
      }

    },
    choseTable(row,column){
      let columnNames = [];
      for (let i = 0; i < row.columns.length; i++) {
        let column = row.columns[i]
        columnNames.push(column.columnName);
      }
      this.columnNames = columnNames;
      this.selectItems = [].concat(this.columnNames);
      this.actualTableName = row.table.actualTableName;
    },
    dataChangeSqls(){
      let dataChangeParam = {
        connName: this.connName,
        actualTableName: this.actualTableName,
        selectItems: this.selectItems,
        condition: this.condition,
        changeType: this.changeType,
        dbTypes: this.dbTypes
      }
      database.dataChangeSqls(dataChangeParam).then(res => {
        this.tabsData = res.data;
      })
    }
  }
}
</script>


